<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>点击</button>
    <script>
        // 函数就是做某件事件，
        // 完成事件，需要依赖某个人，某个人做了某件事，
        // 谁做了这个事情， this  就是谁
        
        // 1. 全局作用域 或者普通函数中 this 指向全局对象  window 
        //    定时器是 window  的方法， this 是 window

        console.log(this);
        function fn(){
            console.log(this);
        }
        //fn();
        window.fn();
        window.setTimeout(function(){
            console.log(this);
        },1000)   

        // 2 方法调用谁  this 指向谁
        
        var a={
            sayHi:function(){
                console.log(this); // this 指向 a  
            }
        }
        a.sayHi();

        // 3. 事件中的this 是绑定的 对象 

        var btn=document.querySelector('button');
        // btn.onclick=function(){
        //     console.log(this); // this  指向的是  btn这个按钮对象
        // }
        btn.addEventListener('click',function(){
            console.log(this);    // this  指向的是  btn这个按钮对象
        })

        // 4. 构造函数中 this 指向构造函数的实例

        function hero(name){
            this.name=name; // 构造函数的目的就是创建对象，给当前对象添加属性。
            console.log(this);  //this 指向的是  janna 实例对象
        }
        // 构造函数， new ， 开辟新的内存空间， 创建一个空对象 ，this 指向这个对象
        //  Hero（）实例化之后，赋值给 janna
        var janna=new Hero('迪迦');

        // 5.  箭头函数， this 对象  就是定义该函数时所在的作用域指向的对象

        console.log(this);
        setInterval(() => {
            console.log(this);
        }, 2000);

        
    </script>
</body>
</html>